<template>
	<view>
		<view class="horizontal_view">
			<view class="calendar-icon-view" style="margin-left: 10rpx;">
				<image class="calendar-icon" src="../static/calendar_left.png" />
			</view>

			<scroll-view class="scrollview-box" scroll-x="true" scroll-y="false" scroll-left="9999">
				<view class="calendar-view">
					<block :key="index" v-for="(item,index) in calendarList">
						<view class="calendar-item" @click="lookUp(item)">
							<view class="weekname">{{item.weekDay}}</view>



							<view v-if="item.isfuture==true" class="futureDay">{{item.date}}</view>

							<view v-else>
								<view v-if="item.choose==true" class="chooseDay">{{item.chooseDate}}</view>
								<view v-else class="historyDay">{{item.date}}</view>
							</view>

							<block v-if="item.haveDriveData==true">
								<image v-if="item.choose==true" class="small_icon2"
									src="@appstatic/car/car_orange_dot.png" />
								<image class="small_icon2" v-else src="../static/car_grey_dot.png" />
							</block>

						</view>
					</block>
				</view>
			</scroll-view>


			<view class="calendar-icon-view" style="margin-right: 10rpx;">
				<image class="calendar-icon" src="../static/calendar_right.png" />
			</view>
		</view>



		<view style="height: calc(100vh - 93px);top: 77px;position: absolute;width: 100vw;">
			<view v-if="historyList.length==0">
				<view class='img-box'>
					<image class='emptyImage' src='@appstatic/img/my/my_order_no_data.png'></image>
					<view class='text'>今天没有驾驶记录</view>
				</view>
			</view>
			<scroll-view v-else scroll-y="true" style="height:calc(100% - 16px);">
				<view style="margin-left: 16px;margin-right: 16px;margin-bottom: 16px;" :key="index1"
					v-for="(item1,index1) in historyList">
					<historyRouteView @toHistoryRoute="toHistoryRoute(item1,index1)"
						@toHistoryRouteList="toHistoryRoute(item1,index1)" :historyRouteName="'历史轨迹'+(index1+1)":startTime="item1.startTime"
						:endTime="item1.endTime" :startAddress="item1.startAddress" :endAddress="item1.endAddress"
						:mileage="item1.mile+''" :time="item1.runDuration+''" :speed="item1.averageSpeed+''">
					</historyRouteView>
				</view>
			</scroll-view>


		</view>





	</view>
</template>

<script>
	import dateForCalendar from '@/utils/dateForCalendar.js'
	import moment from 'dayjs'
	import historyRouteView from '@/components/historyRouteView.vue'
	const app = getApp();
	const util = require('@utils/util.js');
	const network = require('@manager/network-manager.js');
	const dialog = require('@utils/dialog.js');
	export default {
		data() {
			return {
				deviceId: '',
				calendarList: [],
				driveDataList: [],
				historyList: [],

			}
		},
		components: {
			historyRouteView
		},
		onLoad() {
			if (uni.getStorageSync('deviceId')) {
				this.deviceId = uni.getStorageSync('deviceId')
			}
			this.calendarList = dateForCalendar.dateList()
			console.log(this.calendarList)
			this.queryTrackCalendar()
			this.queryTrackSegmentList(moment().format("YYYY-MM-DD"))
		},
		methods: {
			//查询某月有产生轨迹的日期
			queryTrackCalendar: function() {
				var that = this;
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_QUERYTRACKCALENDAR;
				var params = {
					deviceId: that.deviceId
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
					var detail=	res.data.detail
						var list = JSON.parse(res.data.detail)
						var dayList = []
						for (var i = 0; i < list.length; i++) {
							dayList = [...dayList, ...list[i].dayList]
						}
						for (var i = 0; i < dayList.length; i++) {
							if (dayList[i].isDriveData == '1') {
								that.driveDataList.push(dayList[i])
							}
						}
						that.calendarList = dateForCalendar.getTrackCalendar(that.calendarList, that
							.driveDataList)

					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},
			//查询某天所有轨迹分段
			queryTrackSegmentList: function(queryDate) {
				var that = this;
				that.historyList = []
				var uri = app.globalData.config.interfaces.URL_CMOBILE_VEHICLEINFO_QUERYTRACKSEGMENTLIST;
				var params = {
					deviceId: that.deviceId,
					queryDate: queryDate
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						var list = JSON.parse(res.data.detail).dataList
						if (list.length > 0) {
							for (var i = 0; i < list.length; i++) {
								list[i].startTime = list[i].periodStartDate.substring(11, 16)
								list[i].endTime = list[i].periodEndDate.substring(11, 16)
							}
							that.historyList = list
						}


					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
					}
				})
			},
			//选择日期查看列表
			lookUp: function(item) {
				if (item.isfuture == false) {
					for (var i = 0; i < this.calendarList.length; i++) {
						this.calendarList[i].choose = false
					}
					item.choose = true
					this.queryTrackSegmentList(moment(item.dateItem).format("YYYY-MM-DD"))
				}

			},

			//跳转路线详细
			toHistoryRoute: function(item, index) {
				uni.navigateTo({
					url: '/module_car/historyTrail/historyTrail?segmentId=' + item.segmentId + "&index=" +
						index + "&historyList=" + JSON.stringify(this.historyList) + "&historyListLength=" +
						this.historyList.length
				})
			},
		}
	}
</script>

<style>
	@import "./historyList.css";
</style>
